<template>
<!-- home -->
  <div>
    <div class="line"></div>
    <el-menu  
      unique-opened :default-active="active" router
      class="el-menu-demo"
      mode="horizontal"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <el-menu-item index="/user">人员管理</el-menu-item>
      <el-menu-item index="/notice">公告/反馈</el-menu-item>
      <el-menu-item index="/room">教室管理</el-menu-item>
      <el-menu-item index="/seatlog">占座记录</el-menu-item>
    <div class="quit">
      <el-tag class="msg" type="danger">管理员:{{this.nickname}}已登录</el-tag>
      <el-button type="info" @click="quit">退出</el-button>
    </div>
    </el-menu>
    <!-- 内容主体 -->
    <el-main>
        <!-- 路由占位符 -->
        <router-view></router-view>
    </el-main>
  </div>
</template>

<script>
export default {
  data(){
    return{
      nickname: window.sessionStorage.getItem("nickname"),
      active: "",//激活菜单的index
    }
  },
  created(){
    this.active = document.location.hash.substr(1);
  },
  methods:{
    //退出
    async quit() {
      const confirmResult = await this.$confirm("确定退出吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).catch((err) => err);
      //如果用户确认退出,则返回值为字符串confirm
      //如果用户取消退出，则返回值为字符串cancel
      if (confirmResult === "confirm") {
        window.sessionStorage.clear();
        return this.$router.push("/login");
      }
    },
  }
};
</script>


<style lang="scss" rel="stylesheet/scss" scoped >
.quit {
  float: right;
  margin-right: 25px;
  margin-top: 10px;
  .msg{
    margin-right: 40px;
  }
}

</style>